/* CSS Document */
*{
	margin: 0px;
	padding: 0px;
}
html{
	height: 100%;
}

@media screen and (min-device-width:400px) {
	
	body{
		background: url(../images/bg.jpg) no-repeat ;
		background-attachment: fixed;
		width: 100%;
		height: 100%;
		overflow:hidden;
	}
	
	.main{
	
	}

	.opcity{
		opacity: .5;
	}
	
	.content{
		width: 200px;
		height: 300px;
		margin-left:100px;
		margin-top: 300px;
		float:left;
	}
	.content2{
		margin-left:50px;
	}
	.header{
		height: 12%;
		width: 100%;
		text-align: center;
		padding-top: 3%;
		color: #552c24;
		font-size: 20px;
	}
	.qr{
		height: 70%;
		width: 100%;
		box-shadow: 0px 0px 10px 1px #231e29;
		
	}
	.qr img{
		height: 100%;
		width: 100%;
		
	}
	.footer{
		height: 7%;
		width: 100%;
		text-align: center;
		padding-top: 3%;
		color: #552c24
	}
}
@media screen and (min-width:300px) and (max-device-width:700px){
	
	body{
		background-color: #000;
		width: 100%;
		height: 100%;
		
	}
	.main{
		width: 100%;
		height: 100%;
		background-color: #fff;
		margin: 10% auto;
		box-shadow: 0px 0px 200px 10px #fff;
		padding-top: 5%;
	}
	
	.content{
		width: 90%;
		height: 90%;
		margin: 5% 5%;
		margin-top: 5%;
		box-shadow: 0px 0px 10px 1px #231e29;
	}
	.content2{
		display: none;
	}
	.header{
		height: 8%;
		width: 100%;
		text-align: center;
		padding-top: 4%;
	}
	.qr{
		height: 70%;
		width: 90%;
		margin:auto;
		box-shadow:none;
	}
	.qr img{
		height: 100%;
		width: 100%;
		
	}
	.footer{
		height: 7%;
		width: 100%;
		text-align: center;
		padding-top: 3%;
	}
}
